import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import { AtGrid, AtTabs, AtTabsPane, AtActionSheet, AtActionSheetItem, AtBadge, AtButton, AtList, AtListItem } from 'taro-ui'
import './consultpage.css'
import app from '../../../../main.js'

export default class ConsultPage extends Component {
    config = {
        navigationBarTitleText: '爱医生医生端'
    }
    constructor() {
        super(...arguments)
        this.state = { 
            current: 0,
            isOpened: false,
            quickly_total: 0, // 快速咨询未读数
            expert_total: 0, // 专家咨询未读数
            group_total: 0, // 团队咨询未读数
            //  专家咨询
            charList: [
            ],
            //   快速咨询
            charList2: [
            ],
            //   团队咨询
            charList3: [
            ],
            //   是否开通
            openOrclose: {},
            // 专家咨询的开关控制
            open: 'display:none',
            noopen: 'display:none',
            // 快速咨询的开关控制
            open2: 'display:none',
            noopen2: 'display:none',
            // 团队咨询的开关控制
            open3: 'display:none',
            noopen3: 'display:none',
            // ActionSheet
            asOpened:false,
            //支付样式
            payStatus:'',
            current_order: ''
        }
    }
    init () {
        this.setState({
            //  专家咨询
            charList: [
            ],
            //   快速咨询
            charList2: [
            ],
            //   团队咨询
            charList3: [
            ],
            // 判定开通了哪些问诊权限
            openOrclose: { dingxiang: this.$router.params.open1,feidingxiang: this.$router.params.open2,tuandui: this.$router.params.open3 }
        }, () => {
            let is = this.state.openOrclose
            let options = ['display:none', 'display:block']
            let nooption = ['display:none', 'display:block']
            if (is.dingxiang == "开通") {
                this.setState({
                    open: options[1],
                    noopen: nooption[0]
                })
                this.getData()
            } else {
                this.setState({
                    open: options[0],
                    noopen: nooption[1]
                })
            }
            if (is.feidingxiang == "开通") {
                this.setState({
                    open2: options[1],
                    noopen2: nooption[0]
                })
                this.getData2()
            } else {
                this.setState({
                    open2: options[0],
                    noopen2: nooption[1]
                })
            }
            if (is.tuandui == "开通") {
                this.setState({
                    open3: options[1],
                    noopen3: nooption[0]
                })
            } else {
                this.setState({
                    open3: options[0],
                    noopen3: nooption[1]
                })
            }
            this.getData3();
        })
    }
    componentDidMount() {
        
    }
    componentDidShow() {
        this.init();
        app.closeSockets();
        this.closeOpen();

    }

    closeOpen() {
        this.setState({
            isOpened: false
        })
    }
    
    handleClick(value) {
        this.setState({
            current: value
        })
    }
    handelOpen = (e) => {
        e.stopPropagation()
        this.setState({
            isOpened: true
        })
    }
    handleClose() {
        this.setState({
            isOpened: false
        })
    }
    gridGo() {
        app.navigateTo('../consultsetting/consultsetting');
    }
    navigateTo(url) {
        app.redirectTo(url)
    }
    gotoChatpage = (item) => {
        var type = item.order_type != '随访订单' ? '问诊订单' : '随访';
        if (item.status == '待接单') {
            app.navigateTo('../../../chat/pages/chatdetail/chatdetail?type='+type+'&relate_id='+item.order_id+'&receiver_id='+item.patient_id);
        } else {
            app.navigateTo('../../../chat/pages/Chat/Chat?type='+type+'&relate_id='+item.order_id+'&receiver_id='+item.patient_id);
        }
    }
    
    handAction(value,relate_id){
        if(value=="确认"){
            let data = {order_id:parseInt(relate_id)}
            app.post('web/myself/accept_order',data,function(res){
                 console.log(res)
            })
            this.setState({
                asOpened:false
            })
        }else if(value=="取消"){
            let data = {order_id:parseInt(relate_id)}
            app.post('web/myself/refuse_order',data,function(res){
                console.log(res)
           })
            this.setState({
                asOpened:false
            })
        }
    }

    offect = 0;
    length = 20;
    total = 0;
    offect2 = 0;
    length2 = 20;
    total2 = 0;
    offect3 = 0;
    length3 = 20;
    total3 = 0;

    //上拉加载
    onReachBottom() {
        var current = this.state.current;
        if (current == 0) {
            if ((this.offect + this.length) < this.total) {
                app.toast('正在加载----')
                this.offect = this.offect + this.length;
                //调用接口
                this.getData();
            } else {
                app.toast('没有更多数据了咯')
            }
        } else if (current == 1) {
            if ((this.offect2 + this.length2) < this.total2) {
                app.toast('正在加载----')
                this.offect2 = this.offect2 + this.length2;
                //调用接口
                this.getData2();
            } else {
                app.toast('没有更多数据了咯')
            }
        } else if (current == 2) {
            if ((this.offect3 + this.length3) < this.total3) {
                app.toast('正在加载----')
                this.offect3 = this.offect3 + this.length3;
                //调用接口
                this.getData3();
            } else {
                app.toast('没有更多数据了咯')
            }
        }
    }
    // 专家咨询
    getData() {
        let me = this
        let data = {offset: me.offect, length: me.length }
        let dataArray = []
        app.post('web/patientInquiry/specialistInquiryList', data, function (res) {
            dataArray = me.state.charList.concat(res.data.result.list)
            me.total = res.data.result.total
            me.setState({
                charList: dataArray,
                expert_total: res.data.result.sum_unread
            })
        })
    }
    // 快速咨询
    getData2() {
        let me = this
        let data = {offset: me.offect2, length: me.length2 }
        let dataArray = []
        app.post('web/patientInquiry/quickInquiryList', data, function (res) {
            dataArray = me.state.charList2.concat(res.data.result.list)
            me.total2 = res.data.result.total
            me.setState({
                charList2: dataArray,
                quickly_total: res.data.result.sum_unread
            })
        })
    }
    // 团队咨询
    getData3() {
        let me = this
        let data = {offset: me.offect3, length: me.length3 }
        let dataArray = []
        app.post('web/patientInquiry/flowOrders', data, function (res) {
            dataArray = me.state.charList3.concat(res.data.result.list)
            me.total3 = res.data.result.total
            me.setState({
                charList3: dataArray,
                group_total: res.data.result.sum_unread
            })
        })
    }   

    // 列表项状态点击
    handelStatus(item, e){
        console.log('e', e);
        e.stopPropagation();
        if(item.status == "待接单"){
            this.setState({
                isOpened:true,
                current_order: item
            })
        }
    }

    // 确认接单
    acceptOrder() {
        var me = this;
        var order = me.state.current_order;
        if (!order.order_id) {
            return;
        }
        app.post('web/wenzen_order/acceptOrder', {id: order.order_id}, function(res) {
            app.navigateTo('../../../chat/pages/Chat/Chat?type=问诊订单&relate_id='+order.order_id+'&receiver_id='+order.patient_id);
        });
    }

    // 拒接接单
    refuseOrder() {
        var me = this;
        var order = me.state.current_order;
        if (!order.order_id) {
            return;
        }
        app.isConfirm('是否拒绝接单', function(res) {
            me.setState({
                isOpened: false
            })
            app.post('web/wenzen_order/refuseOrder', {id: order.order_id}, function(res) {
                if (res.data.result.is_success) {
                    app.toastMessage('操作成功', function() {
                        setTimeout(() => {
                            Taro.navigateBack({
                                delta: 1
                            });
                        }, 1000);
                    });
                } else {
                    app.toastMessage('操作失败');
                }
            });
        });
        
    }

    render() {
        return (
            <View className='consultpage'>
                <AtList  className='grid' hasBorder={false}>
                    <AtListItem
                        title='咨询设置'
                        arrow='right'
                        thumb={app.imageUri + 'img/setting.png'}
                        onClick={this.gridGo.bind(this)}
                    />
                </AtList>
                <View className='tab-box'>
                    <AtBadge value={this.state.expert_total == 0 ? '' : this.state.expert_total} maxValue={99} className='all-message-one'></AtBadge>
                    <AtBadge value={this.state.quickly_total == 0 ? '' : this.state.quickly_total} maxValue={99} className='all-message-two'></AtBadge>
                    <AtBadge value={this.state.group_total == 0 ? '' : this.state.group_total} maxValue={99} className='all-message-three'></AtBadge>
                    <AtTabs
                        current={this.state.current}
                        tabList={[{ title: '专家咨询' }, { title: '快速咨询' }, { title: '随访订单' }]}
                        onClick={this.handleClick.bind(this)}
                        swipeable={false}
                    >
                        <AtTabsPane current={this.state.current} index={0} >
                            <View className='patient-list' style={this.state.open}>
                                {
                                    this.state.charList.map((item) => {
                                        return (
                                            <View className='l_item' onClick={this.gotoChatpage.bind(this, item)}>
                                                <View className='left'>
                                                    <AtBadge value={item.unread == 0 ? '' : item.unread} maxValue={99} className='zjzx'>
                                                        <Image className='head' src={item.sender_head_image}></Image>
                                                    </AtBadge>
                                                    <View className='info'>
                                                        <View className='name'>{item.sender_name}</View>
                                                        <View className='content'>{item.content}</View>
                                                    </View>
                                                </View>
                                                <View className='right'>
                                                    <View className='r_wrap'>
                                                        <View className='time'>{item.created_at}</View>
                                                        {
                                                            item.status == '待接单' ? 
                                                            (
                                                                <View className='status btn' onClick={this.handelStatus.bind(this, item)}>{item.status}</View>
                                                            ) : (item.status == '待回复' ? 
                                                            (
                                                                <View className='status btn'>{item.status}</View>
                                                            ) : (item.status == '随访中' || item.status == '咨询中' ? 
                                                            (
                                                                <View className='status green'>{item.status}</View>
                                                            ) : (
                                                                <View className='status'>{item.status}</View>
                                                            )))
                                                        }
                                                    </View>
                                                </View>
                                            </View>
                                        )
                                    })
                                }
                            </View>
                            <View className='please-open' style='display:none' style={this.state.noopen}>
                                <Image className='img' src={app.imageUri + 'img/document.png'}></Image>
                                <View className='tips-one'>您还没有开通专家咨询服务</View>
                                <View className='tips-two'>开通后患者才能通过爱眼医生平台向您发起咨询</View>
                                <AtButton className='open-btn' onClick={this.navigateTo.bind(this, '../consultsetting/consultsetting')}>马上去开通</AtButton>
                            </View>
                        </AtTabsPane>
                        <AtTabsPane current={this.state.current} index={1}>
                            <View className='patient-list' style={this.state.open2}>
                                {
                                    this.state.charList2.map((item) => {
                                        return (
                                            <View className='l_item' onClick={this.gotoChatpage.bind(this, item)}>
                                                <View className='left'>
                                                    <AtBadge value={item.unread == 0 ? '' : item.unread} maxValue={99} className='zjzx'>
                                                        <Image className='head' src={item.sender_head_image}></Image>
                                                    </AtBadge>
                                                    <View className='info'>
                                                        <View className='name'>{item.sender_name}</View>
                                                        <View className='content'>{item.content}</View>
                                                    </View>
                                                </View>
                                                <View className='right'>
                                                    <View className='r_wrap'>
                                                        <View className='time'>{item.created_at}</View>
                                                        {
                                                            item.status == '待接单' ? 
                                                            (
                                                                <View className='status btn' onClick={this.handelStatus.bind(this, item)}>{item.status}</View>
                                                            ) : (item.status == '待回复' ? 
                                                            (
                                                                <View className='status btn'>{item.status}</View>
                                                            ) : (item.status == '随访中' || item.status == '咨询中' ? 
                                                            (
                                                                <View className='status green'>{item.status}</View>
                                                            ) : (
                                                                <View className='status'>{item.status}</View>
                                                            )))
                                                        }
                                                    </View>
                                                </View>
                                            </View>
                                        )
                                    })
                                }
                            </View>
                            <View className='please-open' style={this.state.noopen2}>
                                <Image className='img' src={app.imageUri + 'img/document.png'}></Image>
                                <View className='tips-one'>您还没有开通快速咨询服务</View>
                                <View className='tips-two'>开通后才能接收到患者的非指定医生咨询订单的派发</View>
                                <AtButton className='open-btn' onClick={this.navigateTo.bind(this, '../consultsetting/consultsetting')}>马上去开通</AtButton>
                            </View>
                        </AtTabsPane>
                        <AtTabsPane current={this.state.current} index={2}>
                            <View className='patient-list'>
                                {
                                    this.state.charList3.map((item) => {
                                        return (
                                            <View className='l_item' onClick={this.gotoChatpage.bind(this, item)}>
                                                <View className='left'>
                                                    <AtBadge value={item.unread == 0 ? '' : item.unread} maxValue={99} className='zjzx'>
                                                        <Image className='head' src={item.sender_head_image}></Image>
                                                    </AtBadge>
                                                    <View className='info'>
                                                        <View className='name'>{item.sender_name}</View>
                                                        <View className='content'>{item.content}</View>
                                                    </View>
                                                </View>
                                                <View className='right'>
                                                    <View className='r_wrap'>
                                                        <View className='time'>{item.created_at}</View>
                                                        {
                                                            item.status == '待接单' ? 
                                                            (
                                                                <View className='status btn' onClick={this.handelStatus.bind(this, item)}>{item.status}</View>
                                                            ) : (item.status == '待回复' ? 
                                                            (
                                                                <View className='status btn'>{item.status}</View>
                                                            ) : (item.status == '随访中' || item.status == '咨询中' ? 
                                                            (
                                                                <View className='status green'>{item.status}</View>
                                                            ) : (
                                                                <View className='status'>{item.status}</View>
                                                            )))
                                                        }
                                                    </View>
                                                </View>
                                            </View>
                                        )
                                    })
                                }
                            </View>
                            {/* <View className='please-open' style={this.state.noopen3} >
                                <Image className='img' src={app.imageUri + 'img/document.png'}></Image>
                                <View className='tips-one'>您还没有开通团队咨询服务</View>
                                <View className='tips-two'>如需开通团队咨询，请联系您的医助或者客服</View>
                                <AtButton className='open-btn' onClick={this.navigateTo.bind(this, '../consultsetting/consultsetting')}>马上去开通</AtButton>
                            </View> */}
                        </AtTabsPane>
                    </AtTabs>
                </View>
                <AtActionSheet isOpened={this.state.isOpened} cancelText='取消' onClose={this.handleClose}>
                    <AtActionSheetItem onClick={this.acceptOrder.bind(this)}>
                        确认接单
                    </AtActionSheetItem>
                    <AtActionSheetItem onClick={this.refuseOrder.bind(this)}>
                        拒绝接单
                    </AtActionSheetItem>
                </AtActionSheet>
            </View>
        );
    }
}
// reactMixin.onClass(Dingxiangwenzhen,myJs);